<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./lib/bnner/slider.css">
    <link rel="stylesheet" href="./css/products.css">
    <title>产品列表</title>
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 顶部导航 -->
        <div class="top-backimg">
            <div class="top-main container cf">
                <span class="fl">legochina.cn</span>
                <span class="bf fr">
                    欢迎光临
                    <a href="#" class="f6">乐购</a>
                    ，请
                    <a href="#" class="bf">登陆</a>
                    \
                    <a href="#" class="f6">注册</a>
                </span>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="search-box container cf">
            <a href="#" class="fr">我的订单</a>
            <a href="#" class="fr">购物车 3</a>
            <div class="search-bnt fr">
                <input type="text">
                <button type="button">搜索</button>
            </div>

        </div>
        <!-- 导航栏+logo -->
        <div class="nav-logo container cf">
            <img src="./images/logo.jpg" alt="1">
            <ul>
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </header>
    <main class="container">
        <div class="top">
            <div class="benner">
                <!--轮播开始-->
                <div class="pptbox" id="topbenner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li>
                            <a href="#"><img src="images/banner1.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner2.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner3.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner4.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner5.jpg" /></a>
                        </li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <!--轮播结束-->
                <script src="javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
            </div>
            <div class="nav">
                <h3>热卖畅销</h3>
                <ul>
                    <li class="on">
                        <div class="box">
                            <img src="./images/23579654-1_l.jpg" alt="1">
                            <p>《三体》刘慈欣一场科幻的史诗风暴</p>
                            <span class="f60">1</span>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <img src="./images/23353342-1_l.jpg" alt="1">
                            <p>《从你的世界路过》</p>
                            <span class="f60">2</span>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <img src="./images/23353342-1_l.jpg" alt="1">
                            <p>《从你的世界路过》</p>
                            <span class="f60">3</span>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <img src="./images/23353342-1_l.jpg" alt="1">
                            <p>《从你的世界路过》</p>
                            <span>4</span>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <img src="./images/23353342-1_l.jpg" alt="1">
                            <p>《从你的世界路过》</p>
                            <span>5</span>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <img src="./images/23353342-1_l.jpg" alt="1">
                            <p>《从你的世界路过》</p>
                            <span>6</span>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <img src="./images/23353342-1_l.jpg" alt="1">
                            <p>《从你的世界路过》</p>
                            <span>7</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="advertisement">
            <img src="./images/guangao.jpg" alt="1">
        </div>
        <!-- 乐购·图书折扣区 -->
        <div class="ebook">
            <div class="top-nav">
                <span>乐购·图书折扣区</span>
            </div>
            <div class="content">
                <div class="bookbox on">
                    <img src="./images/22935553-1_l.jpg" alt="1">
                    <img src="./images/8zhe.jpg" alt="1">
                    <p class="f3">白夜行 东野上吾</p>
                    <span class="f6 ">
                        推荐：
                        <div>
                            <div></div>
                        </div>
                    </span>
                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                </div>
                <script>
                    for (let i = 1; i < 10; i++) {
                        document.write(`
                        <div class="bookbox">
                            <img src="./images/22935553-1_l.jpg"  alt="1">
                            <img src="./images/8zhe.jpg" alt="1">
                            <p class="f3">白夜行  东野上吾</p>
                            <span class="f6">推荐：
                                <div>
                                    <div></div>
                                </div>
                            </span>
                            <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                        </div>
                        `)
                    }
                </script>
            </div>
        </div>
        <!-- 新书上架 -->
        <div class="grounding">
            <div class="top-nav">
                <span>新</span>书上架
            </div>
            <div class="content">
                <div class="left">
                    <div class="on">
                        <img src="./images/22928335-1_l.jpg" alt="1">
                        <p>查理 斯密斯</p>
                        <p>中国邮电出版社</p>
                        <p>￥49<del>￥79</del></p>
                    </div>
                    <script>
                        for (let i = 0; i < 9; i++) {
                            document.write(`
                            <div>
                                <img src="./images/22928335-1_l.jpg" alt="1">
                                <p>查理 斯密斯</p>
                                <p>中国邮电出版社</p>
                                <p>￥49<del>￥79</del></p>
                            </div>
                            `)
                        }
                    </script>
                </div>
                <div class="book-side">
                    <h4>主编推荐</h4>
                    <ul>
                        <li class="cf">
                            <span class="f6 fl">1</span>
                            <p class="fl ">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl active">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="f6 fl">2</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="f6 fl">3</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="fl">4</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="fl">5</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="fl">6</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="fl">7</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                        <li class="cf">
                            <span class="fl">8</span>
                            <p class="fl active">就喜欢你看不惯我 又干不</p>
                            <div class="cf fl ">
                                <img src="./images/index08_05.jpg" alt="1" class="fl">
                                <span class="fr">从你的世界路过
                                    入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 独家提供 -->
        <div class="offer ebook">
            <div class="top-nav cf">
                <span>独</span>家提供
                <div class="cf fr">
                    <p class="fl on">货币金融</p>
                    <p class="fl">社会文学</p>
                    <p class="fl">科学技术</p>
                    <p class="fl">儿童文学</p>
                    <p class="fl">教学参辅</p>
                    <p class="fl">生活</p>
                    <p class="fl">小说</p>
                </div>
            </div>
            <div class="content on">
                <!--轮播开始-->
                <div class="offerppt pptbox" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li>
                            <div class="bookbox1">
                                <div class="bookbox on">
                                    <img src="./images/pro-demo.jpg" alt="1">
                                    <p class="f3">查理 斯密斯</p>
                                    <span>中国邮电出版社</span>
                                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                </div>
                                <script>
                                    for (let i = 1; i < 12; i++) {
                                        document.write(`
                                        <div class="bookbox">
                                            <img src="./images/pro-demo.jpg" alt="1">
                                            <p class="f3">查理 斯密斯</p>
                                            <span>中国邮电出版社</span>
                                            <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                        </div>
                                        `)
                                    }
                                </script>
                            </div>
                        </li>
                        <li>
                            <div class="bookbox1">
                                <div class="bookbox on">
                                    <img src="./images/pro-demo.jpg" alt="1">
                                    <p class="f3">查理 斯密斯</p>
                                    <span>中国邮电出版社</span>
                                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                </div>
                                <script>
                                    for (let i = 1; i < 12; i++) {
                                        document.write(`
                                        <div class="bookbox">
                                            <img src="./images/pro-demo.jpg" alt="1">
                                            <p class="f3">查理 斯密斯</p>
                                            <span>中国邮电出版社</span>
                                            <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                        </div>
                                        `)
                                    }
                                </script>
                            </div>
                        </li>
                        <li>
                            <div class="bookbox1">
                                <div class="bookbox on">
                                    <img src="./images/pro-demo.jpg" alt="1">
                                    <p class="f3">查理 斯密斯</p>
                                    <span>中国邮电出版社</span>
                                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                </div>
                                <script>
                                    for (let i = 1; i < 12; i++) {
                                        document.write(`
                                        <div class="bookbox">
                                            <img src="./images/pro-demo.jpg" alt="1">
                                            <p class="f3">查理 斯密斯</p>
                                            <span>中国邮电出版社</span>
                                            <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                        </div>
                                        `)
                                    }
                                </script>
                            </div>
                        </li>
                        <li>
                            <div class="bookbox1">
                                <div class="bookbox on">
                                    <img src="./images/pro-demo.jpg" alt="1">
                                    <p class="f3">查理 斯密斯</p>
                                    <span>中国邮电出版社</span>
                                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                </div>
                                <script>
                                    for (let i = 1; i < 12; i++) {
                                        document.write(`
                                        <div class="bookbox">
                                            <img src="./images/pro-demo.jpg" alt="1">
                                            <p class="f3">查理 斯密斯</p>
                                            <span>中国邮电出版社</span>
                                            <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                        </div>
                                        `)
                                    }
                                </script>
                            </div>
                        </li>
                        <li>
                            <div class="bookbox1">
                                <div class="bookbox on">
                                    <img src="./images/pro-demo.jpg" alt="1">
                                    <p class="f3">查理 斯密斯</p>
                                    <span>中国邮电出版社</span>
                                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                </div>
                                <script>
                                    for (let i = 1; i < 12; i++) {
                                        document.write(`
                                        <div class="bookbox">
                                            <img src="./images/pro-demo.jpg" alt="1">
                                            <p class="f3">查理 斯密斯</p>
                                            <span>中国邮电出版社</span>
                                            <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                        </div>
                                        `)
                                    }
                                </script>
                            </div>
                        </li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <!--轮播结束-->

            </div>
            <div class="content" style="background-color: rgb(114, 50, 50);">
                1
            </div>
            <div class="content" style="background-color: rgb(50, 94, 114);">
                1
            </div>
            <div class="content" style="background-color: rgb(114, 50, 66);">
                1
            </div>
            <div class="content" style="background-color: rgb(63, 114, 50);">
                1
            </div>
            <div class="content" style="background-color: rgb(102, 114, 50);">
                1
            </div>
            <div class="content" style="background-color: rgb(114, 50, 109);">
                1
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="like cf">
            <div class="top-nav">
                <span>猜</span>你喜欢
                <p class="fr">换一换</p>
            </div>
            <div class="big-content-box">
                <div class="contentbox">
                    <div class="content">
                        <script>
                            for (let i = 0; i < 12; i++) {
                                document.write(`
                                <div class="bookbox">
                                    <img src="./images/book6.jpg" alt="1">
                                    <p>查理 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <p class="f6">￥49<del>￥79</del></p>
                                </div>
                                `)
                            }
                        </script>
                    </div>
                    <div class="content">
                        <script>
                            for (let i = 0; i < 12; i++) {
                                document.write(`
                                <div class="bookbox">
                                    <img src="./images/book5.jpg" alt="1">
                                    <p>查理 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <p class="f6">￥49<del>￥79</del></p>
                                </div>
                                `)
                            }
                        </script>
                    </div>
                    <div class="content">
                        <script>
                            for (let i = 0; i < 12; i++) {
                                document.write(`
                                <div class="bookbox">
                                    <img src="./images/book4.jpg" alt="1">
                                    <p>查理 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <p class="f6">￥49<del>￥79</del></p>
                                </div>
                                `)
                            }
                        </script>
                    </div>
                    <div class="content">
                        <script>
                            for (let i = 0; i < 12; i++) {
                                document.write(`
                                <div class="bookbox">
                                    <img src="./images/book6.jpg" alt="1">
                                    <p>查理 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <p class="f6">￥49<del>￥79</del></p>
                                </div>
                                `)
                            }
                        </script>
                    </div>
                </div>
            </div>
        

        </div>
        <!-- 书籍精选 -->
        <div class="bookchecked">
            <script>
                for(let i=0;i<6;i++){
                    document.write(`
                    <div class="book">
                        <div class="words">
                            <p>人文社科精选</p>
                            <p>书好价优</p>
                            <p>满3件折上7折</p>
                        </div>
                        <img src="./images/jingxuan_11.jpg" alt="1">
                    </div>
                    `)
                }
            </script>
        </div>
            <div class="advertisement">
            <img src="./images/guangao.jpg" alt="1">
        </div>
    </main>











    <!-- 页脚 -->
     <div class="line"></div>
    <footer>
        <div class="top">
            <img src="./images/222_11.png" alt="1">
            <img src="./images/222_13.png" alt="1">
            <img src="./images/222_15.png" alt="1">
            <img src="./images/222_17.png" alt="1">
        </div>
        <div class="bot">
            <div>
                <span>购物指南</span>
                <p>购物流程</p>
                <p>发票制度</p>
                <p>账户管理</p>
                <p>会员优惠</p>
            </div>
            <div>
                <span>支付方式</span>
                <p>货到付款</p>
                <p>网上支付</p>
                <p>礼品卡支付</p>
                <p>银行转帐</p>
            </div>
            <div>
                <span>订单服务</span>
                <p>订单配送查询</p>
                <p>订单状态说明</p>
                <p>自助取消订单</p>
                <p>自助修改订单</p>
            </div>
            <div>
                <span>商家服务</span>
                <p>商家中心</p>
                <p>运营服务</p>
                <p>加入尾品汇</p>
            </div>
            <div class="logo"><img src="./images/logo_00.png" alt="1"></div>
        </div>
        <p><a href="#">公司简介</a> | <a href="#">Investor Relations</a> | <a href="#">网站联盟</a> | <a href="#">乐购招商</a> | <a
                href="#">机构销售</a> | <a href="#">手机乐购</a> | <a href="#">官方Blog</a> | <a href="#">热词搜索</a></p>
        <div class="last"><span> Copyright (C) 乐购网 2004-2016, All Rights Reserved</span> </div>

    </footer>

    <script src="./lib/jquery-1.11.0.js"></script>
    <script src="./lib/bnner/slider.js"></script>
    <script src="./js/products.js"></script>
</body>

</html>